<template>
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check = false
>
  <!-- <van-cell v-for="(item,index) in list" :key="index" :title="item.content" /> -->
<commponentItem :articleList="item" v-for="(item,index) in list" :key="index" @showreplyFn="$emit('showreplyFn', $event)"></commponentItem>
</van-list>
</template>

<script>
import { getComments } from '@/api/comment.js'
import commponentItem from './commponent-item.vue'
export default {
  name: 'articleComment',
  components: {
    commponentItem
  },
  // inject: {
  //   articleId: {
  //     type: [Number, String, Object],
  //     default: null
  //   }
  // },
  props: {
    articleId: {
      type: [Number, String, Object],
      required: true
    },
    list: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'a'
    }
  },
  data () {
    return {
      // list: [],
      loading: false,
      finished: false,
      offset: null,
      totalCount: 0
    }
  },
  created () {
    this.onLoad()
  },
  methods: {
    async onLoad () {
      const { data } = await getComments({
        type: this.type,
        source: this.articleId.toString(),
        offset: this.offset,
        limit: 10
      })
      console.log(data)
      const { results } = data.data
      // this.$parent.list = [...results]
      this.list.push(...results)
      this.loading = false
      this.totalCount = data.data.total_count
      this.$emit('loadTotalCount', data.data)
      if (data.data.results.length) {
        this.offset = data.data.last_id
      } else {
        this.finished = true
      }
    }
  }
}
</script>

<style scoped lang="less">
  .publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .van-list {
    margin-bottom: 45px;
  }
</style>
